<template>
  <ZSelect v-model="mode" :options="themes"></ZSelect>
</template>
<script setup lang="ts">
import { useColorMode } from "@vueuse/core";

const themes = [
  "light",
  "dark",
  "cupcake",
  "bumblebee",
  "emerald",
  "corporate",
  "synthwave",
  "retro",
  "cyberpunk",
  "valentine",
  "halloween",
  "garden",
  "forest",
  "aqua",
  "lofi",
  "pastel",
  "fantasy",
  "wireframe",
  "black",
  "luxury",
  "dracula",
  "cmyk",
  "autumn",
  "business",
  "acid",
  "lemonade",
  "night",
  "coffee",
  "winter",
];

const mode = useColorMode({
  attribute: "data-theme",
  initialValue: "light",
});
</script>
